<template>
  <!-- 案件列表 -->
  <div class="app-container">
    <el-card shadow="always">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="130px">
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="措施类型" prop="isCoercive">
              <el-select
                v-model="formData.isCoercive"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in isCoerciveOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="执法案由" prop="cause">
              <el-input
                v-model="formData.cause"
                placeholder="请输入执法案由"
                clearable
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="办案单位" prop="uhId">
              <el-select
                style="width: 100%"
                @change="uhIdChange"
                v-model="formData.uhId"
                filterable
                placeholder="请选择办案单位"
              >
                <el-option
                  v-for="item in uhIdOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"> </el-col>
          <el-col :span="6">
            <el-form-item label="当事人" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入当事人"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="存放区域" prop="wId">
              <el-select
                v-model="formData.wId"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in depotList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="办案人员" prop="phName">
              <el-select
                style="width: 100%"
                v-model="formData.phName"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择办案人员"
                v-if="formData.uhId"
              >
                <el-option
                  v-for="item in phNameOptions.filter((e) => e.value === formData.uhId)"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
              <el-select
                v-else
                style="width: 100%"
                v-model="formData.phName"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择办案人员"
              >
                <el-option
                  v-for="item in phNameOptions"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="先行登记文书编号" prop="goWritId">
              <el-input
                v-model="formData.goWritId"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="large" style="display: flex; justify-content: flex-end">
              <el-button :loading="loading" class="bg-color-2d" size="medium" @click="getList"
                >搜索</el-button
              >
              <el-button :loading="loading" @click="resetForm" size="medium">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="p-title">
      <div>
        <i class="el-icon-user-solid color-189" style="margin-right: 4px"></i>当事人:<span
          style="margin-left: 8px; font-weight: 500"
          class="color-189"
          >{{ $route.query.name }}</span
        >
      </div>
      <el-button :loading="loading" class="regist" type="primary" @click="registerDispose"
        >登记</el-button
      >
    </div>
    <el-card shadow="always">
      <!-- 列表 -->
      <el-table :row-class-name="tableRowClassName" stripe v-loading="loading" :data="disposalList">
        <el-table type="selection" width="55" align="center" />
        <el-table-column label="序号" align="center" prop="index">
          <template slot-scope="scope">
            {{ scope.row.index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="文书编号" align="center" prop="caseNum" />
        <el-table-column label="当事人" align="center" prop="name" />
        <el-table-column label="性别" align="center" prop="sex" />
        <el-table-column label="手机号" align="center" prop="phone" />
        <el-table-column label="身份证号" align="center" prop="idCardNo" />
        <el-table-column label="执法地点" align="center" prop="lawAddress" />
        <el-table-column label="现场照片" align="center" prop="imgUrl" width="100">
          <template slot-scope="scope">
            <image-preview
              :src="scope.row.imgUrl ? scope.row.imgUrl : ''"
              :width="50"
              :height="50"
            />
          </template>
        </el-table-column>
        <el-table-column label="办案人员" align="center" prop="phName" />
        <el-table-column label="登记时间" align="center" prop="createTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="updateList(scope.row.id)"
              >物品详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="bottom">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="paging"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import { getRegistryList } from '@/api/property/registerInfo.js'
import { unitDispose, personnelDispose, warehouseDispose } from '@/api/property/dispose.js'
export default {
  components: {},
  props: [],
  dicts: ['fianncial_registry_sex'],
  data() {
    return {
      rules: {
        phone: [
          {
            pattern: /^1\d{10}$/,
            message: '手机号格式错误'
          }
        ]
      },
      // 列表
      disposalList: [],
      formData: {
        uhId: null,
        phName: [],
        name: null,
        address: null,
        cause: null,
        createTime: null,
        updateTime: null,
        isCoercive: null,
        sex: null,
        phone: null,
        lawAddress: null
      },
      depotList: [],
      uhIdOptions: [],
      phNameOptions: [],
      isCoerciveOptions: [
        {
          label: '扣押',
          value: '1'
        },
        {
          label: '先行扣押登记',
          value: '2'
        }
      ],
      // 遮罩层
      loading: false,
      // 页数
      pageNum: 1,
      // 页大小
      pageSize: 10,
      // 总页数
      total: 0
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // 获取案件列表
    this.getList()

    // 处理办案单位数据
    unitDispose().then((e) => {
      this.uhIdOptions = e
    })

    // 处理仓库列表数据
    warehouseDispose().then((e) => {
      this.depotList = e
    })
    // 处理办案人员数据
    personnelDispose().then((e) => {
      this.phNameOptions = e
    })
  },
  methods: {
    // 修改办案单位清空办案人员
    uhIdChange() {
      this.formData.phName = []
    },

    // 登记物品详情
    updateList(e) {
      this.$router.push({ path: '/property/list', query: { id: e } })
    },

    // 获取案件列表 搜索
    getList() {
      this.loading = true
      getRegistryList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.formData,
        phName: this.formData.phName.join(',')
      }).then((res) => {
        console.log(res)
        this.disposalList = res.rows
        this.total = res.total
        this.loading = false
      })
    },

    // 分页
    paging(res) {
      this.pageNum = res.page
      this.pageSize = res.limit
      this.$nextTick(() => {
        this.getList()
      })
    },

    // 把表格每一行的索引放进 row
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },

    // 登记处置
    registerDispose() {
      this.$router.push('/property/registry')
    },

    // 重置
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.pageNum = 1
      this.pageSize = 10
      this.getList()
    }
  }
}
</script>
<style scoped lang="scss">
.p-title {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  div {
    line-height: 30px;
    font-weight: 600;
  }
}
.color-189 {
  color: #1890ff;
}
</style>
